<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
			
		<title>Enlargement</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        
		<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" />
		<link rel="stylesheet" href="css/custom.css" />
		<link rel="stylesheet" href="css/app.css" />
		<link rel="stylesheet" href="css/fonts.css" />
		
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/cordova-2.9.0.js"></script>
	    <script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/library.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/common.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/localize.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/plugins/Calendar.js"></script>
    	<script type="text/javascript" charset="utf-8">
		 	    	
	    	$(document).on("pagebeforeshow", "#calendar",function(event){
		 		//alert(1);
		 		//window.location.href="sendEmail.html?id=apartment";
		 		document.addEventListener("deviceready", onDeviceReady, true); 
		 	});
	 		
			function onDeviceReady() {
		        excecuteLocalization(["calendar","global"]);
		        
				db = openDatabase(shortName, version, displayName,maxSize);
		 		
		 		db.transaction(populateDB, errorCB);
		 		window.setTimeout("showData()", 1000);
		 		
		 		$('.ui-select').css({'width':'85px'}).css({'float':'left'}).selectmenu('refresh');
		 		
		    }
		 	
		 	
		 	/***********************************************************************/
		 	
		    function populateDB(tx) {
		    	//tx.executeSql('drop table excercises',[],nullHandler,errorCB);
		        tx.executeSql('CREATE TABLE IF NOT EXISTS excercises (id INTEGER PRIMARY KEY AUTOINCREMENT, excercise TEXT NOT NULL, datetime TEXT NOT NULL, timer TEXT NOT NULL, length TEXT)',[],nullHandler,errorCB);		    
		    }
		 
		   	function errorCB(transaction, error) {
		    	   alert('Error: ' + error.message + ' code: ' + error.code);
		    }
		    
		    function nullHandler(){};
		    
		    
		    /***********************************************************************/
		 	
		     // prep some variables
			var startDate = new Date("February 24, 2013 13:00:00");
			var endDate = new Date("February 24, 2013 14:30:00");
			var title = "My nice event";
			var locat = "Home";
			var notes = "Some notes about this event.";
			var successFunc = 	function(message) { 
								alert("Success: " + JSON.stringify(message)); 
							};
			var errorFunc = 	function(message) { 
								alert("Error: " + message); 
							};
							
							
			function saveExcerciseSchedule(){
				
				var today = new Date();
				
				var startMorningTime = $("#morning_time_select").val() + ":" + $("#morning_minutes_select").val();
				var endMorningTime = $("#morning_time_select").val() + ":" + getEndTimeLapse($("#morning_minutes_select").val());
				
				var startEveningTime = $("#evening_time_select").val() + ":" + $("#evening_minutes_select").val();
				var endEveningTime = $("#evening_time_select").val() + ":" + getEndTimeLapse($("#evening_minutes_select").val());
				
				var tmpDate = new Date();
				
				alert("startMorningTime: " + startMorningTime);
				alert("endMorningTime: " + endMorningTime);
				alert("startEveningTime: " + startEveningTime);
				alert("endEveningTime: " + endEveningTime);
				
				for(i=0;i<=6;i++){
					
					tmpDate.setDate(today.getDate() + i);
					
					currentMonth = getMonthName(today.getMonth());
					currentDay = tmpDate.getDate();
					currentYear = tmpDate.getYear();
					
					title = "Morning Excercise";
					startDate = new Date(currentMonth + " " + currentDay + ", " + currentYear + " " + startMorningTime + ":00");
					alert("startDate Monrning: " + startDate.toLocaleString());
					
					endDate = new Date(currentMonth + " " + currentDay + ", " + currentYear + " " + endMorningTime + ":00");
					alert("endDate Monrning: " + endDate.toLocaleString());
					//doCalendar(title,locat,notes,startDate,endDate);
					
					/*****************/
					
					
					title = "Evening Excercise";
					
					startDate = new Date(currentMonth + " " + currentDay + ", " + currentYear + " " + startEveningTime + ":00");
					alert("startDate Evening: " + startDate);
					
					endDate = new Date(currentMonth + " " + currentDay + ", " + currentYear + " " + endEveningTime + ":00");
					alert("endDate Evening: " + endDate);
					//doCalendar(title,locat,notes,startDate,endDate);
					
				}
				
				
				
			}		
			
							
	    
		    function doCalendar(title,locat,notes,startDate,endDate){
		    
			    // create
			    alert("creating: " + title);
			  	window.plugins.Calendar.createEvent(title,locat,notes,startDate,endDate,successFunc,errorFunc);
			
			  	
			  	
				// find (iOS only for now)
				//window.plugins.calendar.findEvent(title,locat,notes,startDate,endDate,success,error);
			
				// change the title of the event (iOS only for now)
				//var newTitle = "New title!";
				//window.plugins.calendar.modifyEvent(title,locat,notes,startDate,endDate,newTitle,location,notes,startDate,endDate,success,error);
			
					    
				// set the startdate to midnight and set the enddate to midnight the next day
				//var startDate = new Date("February 20, 2013 00:00:00");
				//var endDate = new Date("February 20, 2013 00:00:00");
				
				// set the startdate to midnight and set the enddate to midnight 3 days later
				//var startDate = new Date("February 11, 2013 00:00:00");
				//var endDate = new Date("February 14, 2013 00:00:00");
			    
		    }
		    

			/**********************************************************************/
			
		    function getMonthName(month){
		    	
		    	if(month!="" && month !=null){
		    		var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
		    		return months[month];
		    	}
		    	else{
		    		return "January";
		    	}
		    }
		    
		    
			function getEndTimeLapse(time){
				switch(time){
					case "00":
						return "05";
						break;
					case "15":
						return "20";
						break;
					case "30":
						return "35";
						break;
					case "45":
						return "50";
						break;
				}
			}
		    
			/**********************************************************************/
		    
	 					
		</script>
		<style>
			.nav-search .ui-btn-up-a {
				background-image:none;
				background-color:#333333;
			}
			.nav-search .ui-btn-inner {
				border-top: 1px solid #888;
				border-color: rgba(255, 255, 255, .1);
			}
			
			section{
				float: left;
				width: 100%;
				height: auto;
				font-size: 14px;
				font-family: Verdana, Geneva, sans-serif;
				color: #333;
			}
			article{
				width: 96%;
				float: left;
				padding: 2%;
				border: 2px solid #8DC2DC;
				margin-top: 10px;
				border-radius: 5px;
				background-color: #B6D8E8;
				color: #333;
				text-align: left;
			}
		</style>
	</head>
<body style="text-align:center;">

<div  data-role="page" style="display:none;" id="calendar"> 
	
	<div data-role="panel" data-position="right" data-position-fixed="false" data-display="overlay" id="menu-panel" data-theme="a">

		<ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search">
			<li data-icon="delete" style="background-color:#111;">
				<a href="#header" data-rel="close"><span data-translate="localize">global.close_menu</span></a>
			</li>
			<li>
				<a href="javascript:backToHome();"><span data-translate="localize">global.go_home</span></a>
			</li>
			<li>
				<a href="javascript:window.location.href='settings.html'"><span data-translate="localize">global.settings</span></a>
			</li>
			<li>
				<a href="javascript:exitAPP();"><span data-translate="localize">global.exit</span></a>
			</li>
		</ul>
		<span data-translate="localize" id="confirm_msgTag" style="display:none;">global.confirm_msg</span>
	</div>

	<div  data-role="header" id="header"  data-position="fixed">
		<img border="0" src="images/img-logo.jpg" alt="Logo" height="35" width="35" style="float:left; display:inline"/>
		<a href="javascript:openMenu();" data-icon="gear" class="ui-btn-right" id="openMenuButton"><span data-translate="localize">global.menu</span></a>
	</div> 
	
	<div  data-role="content">
		<table style="width: 100%">
			<tr><td></td></tr>
			<tr>
				<td>
					<span data-translate="localize">calendar</span><br><br>
				</td>
			</tr>
			<tr>
				<td>
					<span data-translate="localize">morning_time</span><br>
				</td>
			</tr>
			<tr>
				<td>
					<div>
						<label for="morning_time_select" class="select"><span data-translate="localize">hour</span>:</label>
						<select name="morning_time_select" id="morning_time_select">
							<option value="01">1</option>
							<option value="02">2</option>
							<option value="03">3</option>
							<option value="04">4</option>
							<option value="05">5</option>
							<option value="06">6</option>
							<option value="07">7</option>
							<option value="08">8</option>
							<option value="09">9</option>
							<option value="10">10</option>
							<option value="11">11</option>
							<option value="12">12</option>
						</select>
					</div>
					<div style="float:left;">
						<label for="morning_minutes_select" class="select" style="width:25px;"><span data-translate="localize">minutes</span>:</label>
						<select name="morning_minutes_select" id="morning_minutes_select">
							<option value="00">00</option>
							<option value="15">15</option>
							<option value="30">30</option>
							<option value="45">45</option>
						</select>
					</div><br>
				</td>
			</tr>
			<tr>
				<td>
					<span data-translate="localize">&nbsp;</span><br>
				</td>
			</tr>
			<tr>
				<td>
					<span data-translate="localize">evening_time</span><br>
				</td>
			</tr>
			<tr>
				<td>
					<div>
						<label for="evening_time_select" class="select"><span data-translate="localize">hour</span>:</label>
						<select name="evening_time_select" id="evening_time_select">
							<option value="13">1</option>
							<option value="14">2</option>
							<option value="15">3</option>
							<option value="16">4</option>
							<option value="17">5</option>
							<option value="18">6</option>
							<option value="19">7</option>
							<option value="20">8</option>
							<option value="21">9</option>
							<option value="22">10</option>
							<option value="23">11</option>
							<option value="00">12</option>
						</select>
					</div>
					<div style="float:left;">
						<label for="evening_minutes_select" class="select" style="width:25px;"><span data-translate="localize">minutes</span>:</label>
						<select name="evening_minutes_select" id="evening_minutes_select">
							<option value="00">00</option>
							<option value="15">15</option>
							<option value="30">30</option>
							<option value="45">45</option>
						</select>
					</div><br><br><br>
				</td>
			</tr>
			<tr>
				<td>
					<button id="higlighted" onclick="saveExcerciseSchedule();"><span data-translate="localize">create_week_events</span></button>	
				</td>
			</tr>
		</table>
	</div> 
	<span data-translate="localize" id="datetimeTag" style="display:none;">datetime</span>
	<!-- 
	<div  data-role="footer" data-position="fixed">
		<button class="button-main-small" onclick="exitAPP();"><span data-translate="localize">global.exit</span></button>
	</div>
	-->
</div>
</body>
</html>